<template>
  <!--业务员我的-->
  <div class="me">
    <div class="hom_back">
      <img src="../../../static/image/head.png" />
      <span class="goout" @click="goout">
        <img src="../../../static/image/goout.png" alt />退出登录
      </span>
    </div>

    <div class="me_top">
      <div class="me_name">{{ nickName }}</div>
      <img class="icon" src="../../../static/image/qrcode.png" @click="logo" />
    </div>
    <div class="me_online" show="sjywy">上线业务员：{{ directNickName }}</div>
    <div class="account">
      <div class="balance">
        <div>
          <div>
            <img src="../../../static/image/ZH.png" />
            账户
          </div>
          <span class="lookbalance" @click="lookStatus">查看提现状态</span>
        </div>
        <div>余额</div>
      </div>
      <div class="balance2">
        <div>￥{{ accountBalance / 100 }}</div>
        <div></div>
        <div @click="Cashwithdrawal(accountBalance)">提现</div>
      </div>
    </div>
    <div class="menu">
      <div class="menu_module">
        <span>购课</span>
        <span style="font-size: 0.28rem">{{ paySource }}</span>
      </div>
      <div class="menu_gang"></div>
      <div class="menu_module">
        <span>开单</span>
        <span>一级</span>
        <span>{{ directCount }}</span>
      </div>
      <div class="menu_module">
        <span style="color: #ffb400">{{ kaidan }}</span>
        <span>二级</span>
        <span>{{ indirectCount }}</span>
      </div>
      <div class="menu_gang"></div>
      <div class="menu_module">
        <span>佣金</span>
        <span>一级</span>
        <span>￥{{ directAmount / 100 }}</span>
      </div>
      <div class="menu_module">
        <span style="color: #ffb400">￥{{ yongjin / 100 }}</span>
        <span>二级</span>
        <span>￥{{ indirectAmount / 100 }}</span>
      </div>
    </div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">购课</mt-tab-item>
      <mt-tab-item id="2">一级推广</mt-tab-item>
      <mt-tab-item id="3">二级推广</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div
          class="ranking"
          v-infinite-scroll="getCardListone"
          infinite-scroll-disabled="moreLoadingone"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <ul class="classify">
            <li :class="{ active: num == 1 }" @click="getNum(1)">专栏</li>
            <li :class="{ active: num == 4 }" @click="getNum(4)">会员</li>
            <li :class="{ active: num == 5 }" @click="getNum(5)">大专栏</li>
          </ul>
          <div
            class="ran_oitem"
            @click="orderdetails(item)"
            v-for="(item, index) in buyclassone"
            :key="index"
          >
            <span
              v-if="item.goodsId == null"
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >会员服务</span
            >
            <span
              v-else
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ item.goodsName }}</span
            >
            <span style="margin-right: 0.53rem; color: #666666"
              >￥{{ item.amount / 100 }}</span
            >
          </div>
        </div>
        <div class="ranking" v-show="nothing" style="margin-bottom: 2rem">
          <img src="../../../static/image/nothing.png" alt />
          <div class="ranking_zi">没有更多数据</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div
          class="ranking"
          v-infinite-scroll="getCardListtwo"
          infinite-scroll-disabled="moreLoadingtwo"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <div
            class="ran_oitem"
            @click="orderdetailstwo(item)"
            v-for="(item, index) in buyclasstwo"
            :key="index"
          >
            <span
              v-if="item.goodsId == null"
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >会员服务</span
            >
            <span
              v-else
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ item.goodsName }}</span
            >
            <span style="margin-right: 0.53rem; color: #666666"
              >￥{{ item.amount / 100 }}</span
            >
          </div>
        </div>
        <div class="ranking" v-show="nothing1" style="margin-bottom: 2rem">
          <img src="../../../static/image/nothing.png" alt />
          <div class="ranking_zi">没有更多数据</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div
          class="ranking"
          v-infinite-scroll="getCardListthree"
          infinite-scroll-disabled="moreLoadingthree"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false"
        >
          <div
            class="ran_oitem"
            @click="orderdetailstwo(item)"
            v-for="(item, index) in buyclassthree"
            :key="index"
          >
            <span
              v-if="item.goodsId == null"
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >会员服务</span
            >
            <span
              v-else
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ item.goodsName }}</span
            >
            <span style="margin-right: 0.53rem; color: #666666"
              >￥{{ item.amount / 100 }}</span
            >
          </div>
        </div>
        <div class="ranking" v-if="nothing2" style="margin-bottom: 2rem">
          <img src="../../../static/image/nothing.png" alt />
          <div class="ranking_zi">没有更多数据</div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <div class="pop_message" v-if="pop">
      <img :src="qrUrl" @click="dada(qrUrl)" />
      <div>通过此二维码扫描注册公众号的用户，参与推广赚取佣金</div>
    </div>
    <div class="pop" v-if="pop" @click="pop = false"></div>
    <div class="txorder" v-show="listStatus">
      <div class="txorder_pop">
        <div class="txorder_list">
          <span>金额</span>
          <span>时间</span>
          <span>状态</span>
        </div>
        <div class="null" v-if="cashlist.length == 0">
          <img src="../../../static/image/nothing.png" alt />
          <div class="ranking_zi">没有更多数据</div>
        </div>
        <div class="txorder_title" v-else>
          <div
            class="txorder_li"
            v-for="(item, index) in cashlist"
            :key="index"
          >
            <span>￥{{ item.amount }}</span>
            <span v-if="item.status == 1">{{
              item.cashTime | formatDate
            }}</span>
            <span v-if="item.status == 2">{{
              item.passTime | formatDate
            }}</span>
            <span v-if="item.status == 1" class="unfinished">审核中</span>
            <span v-if="item.status == 2" class="success">提现成功</span>
          </div>
        </div>
        <button @click="close">退出</button>
      </div>
    </div>
    <footer>
      <Footers></Footers>
    </footer>
  </div>
</template>
<script>
import Footers from "./footer";
import { owner, ownercourse, Cashlist } from "../../api/api";
import querystring from "query-string";
import { Navbar, TabItem, InfiniteScroll, Indicator, Toast } from "mint-ui";

export default {
  name: "Me",
  components: {
    Footers,
  },
  data() {
    return {
      pop: false,
      qrUrl: "",
      nickName: "",
      directNickName: "",
      accountBalance: "",
      paySource: "",
      directCount: "",
      indirectCount: "",
      kaidan: "",
      directAmount: "",
      indirectAmount: "",
      yongjin: "",
      pageNo: 1,
      buyclassone: [],
      buyclasstwo: [],
      buyclassthree: [],
      sjywy: false,
      aheight: "",
      selected: "1",
      pageNoone: 2,
      pageNotwo: 2,
      pageNothree: 2,
      queryLoading: true,
      moreLoadingone: false,
      moreLoadingtwo: false,
      moreLoadingthree: false,
      allLoaded: false,
      nothing: false,
      nothing1: false,
      nothing2: false,
      cashlist: [],
      listStatus: false,
      num: 1,
    };
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
  created() {},
  methods: {
    //购课类别切换
    getNum(index) {
      this.num = index;
      this.ownercourseone();
    },
    //业务员我的
    Salesmandetail() {
      var params = {
        columnId: this.columnId,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      owner(params, a).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.directSuperior == null) {
            this.sjywy = true;
          }
          this.directNickName = res.data.data.directSuperior;
          this.accountBalance = res.data.data.accountBalance;
          this.paySource = res.data.data.paySource;
          this.directCount = res.data.data.directCount;
          this.indirectCount = res.data.data.indirectCount;
          this.kaidan = res.data.data.directCount + res.data.data.indirectCount;
          this.directAmount = res.data.data.directAmount;
          this.indirectAmount = res.data.data.indirectAmount;
          this.yongjin =
            res.data.data.directAmount + res.data.data.indirectAmount;
        } else {
          Toast(res.data.message);
        }
      });
    },
    //业务员购课列表
    ownercourseone() {
      var params = {
        type: this.num,
        pageNo: 1,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ownercourse(params, a).then((res) => {
        if (res.data.code == 1) {
          this.buyclassone = res.data.data;
          if (this.buyclassone.length == 0) {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
        }
      });
    },
    //提现状态
    Cashlist() {
      var params = {};
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Cashlist(params, a).then((res) => {
        if (res.data.code == 1) {
          this.cashlist = res.data.data;
        }
      });
    },
    //查看提现状态
    lookStatus() {
      this.listStatus = true;
    },
    //退出
    close() {
      this.listStatus = false;
    },
    //业务员一级推广列表
    ownercoursetwo() {
      var params = {
        type: 2,
        pageNo: 1,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ownercourse(params, a).then((res) => {
        if (res.data.code == 1) {
          this.buyclasstwo = res.data.data;
          if (this.buyclasstwo.length == 0) {
            this.nothing1 = true;
          } else {
            this.nothing1 = false;
          }
        }
      });
    },
    //业务员二级列表
    ownercoursethree() {
      var params = {
        type: 3,
        pageNo: 1,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ownercourse(params, a).then((res) => {
        if (res.data.code == 1) {
          this.buyclassthree = res.data.data;
          if (this.buyclassthree.length == 0) {
            this.nothing2 = true;
          } else {
            this.nothing2 = false;
          }
        }
      });
    },
    //订单明细
    orderdetails(item) {
      if (item.goodsId == null) {
        Toast("此服务不可点击");
      } else {
        this.$router.push({
          path: "/Salesman/details",
          query: { orderid: item.orderId },
        });
      }
    },
    orderdetailstwo(item) {
      if (item.goodsId == null) {
        Toast("此服务不可点击");
      } else {
        this.$router.push({
          path: "/Salesman/details",
          query: { orderid: item.orderId },
        });
      }
    },
    //提现
    Cashwithdrawal(accountBalance) {
      this.$router.push({
        path: "/Salesman/withdraw",
        query: { accountBalance: accountBalance },
      });
    },
    //点击分享码
    logo() {
      this.pop = true;
    },
    //上拉加载one
    getCardListone() {
      if (this.allLoaded) {
        this.moreLoadingone = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoadingone = true;
      var params = {
        type: 1,
        pageNo: this.pageNoone,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ownercourse(params, a).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNoone += res.data.data.length;
            res.data.data.forEach((element) => {
              this.buyclassone.push(element);
            });
            this.moreLoadingone = false;
          } else {
            this.allLoaded = true;
            this.moreLoadingone = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    goout() {
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
    //上拉加载two
    getCardListtwo() {
      if (this.allLoaded) {
        this.moreLoadingtwo = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoadingtwo = true;
      var params = {
        type: 1,
        pageNo: this.pageNotwo,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      ownercourse(params, a).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNotwo += res.data.data.length;
            res.data.data.forEach((element) => {
              this.buyclasstwo.push(element);
            });
            this.moreLoadingtwo = false;
          } else {
            this.allLoaded = true;
            this.moreLoadingtwo = true;
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //上拉加载three
    getCardListthree() {
      if (this.allLoaded) {
        this.moreLoadingthree = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoadingthree = true;
      var params = {
        type: 1,
        pageNo: this.pageNothree,
        pageSize: 10,
      };
      var params = querystring.stringify(params);
      var a = JSON.parse(localStorage.getItem("token"));
      ownercourse(params, a).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.pageNothree += res.data.data.length;
            res.data.data.forEach((element) => {
              this.buyclassthree.push(element);
            });
            this.moreLoadingthree = false;
          } else {
            this.allLoaded = true;
            this.moreLoadingthree = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    //点击图片放大预览
    dada(url) {
      var img = new Array();
      img.push(url);
      WeixinJSBridge.invoke("imagePreview", {
        urls: img,
        current: url,
      });
    },
  },
  mounted() {
    this.qrUrl = JSON.parse(localStorage.getItem("user")).qrUrl;
    this.nickName = JSON.parse(localStorage.getItem("user")).nickName;
    this.Salesmandetail();
    this.ownercourseone();
    this.ownercoursetwo();
    this.ownercoursethree();
    this.Cashlist();
  },
};
</script>
<style lang="scss" scoped>
//mint-ui样式
.mint-navbar .mint-tab-item.is-selected {
  color: #ffb400;
}
.mint-navbar {
  margin-top: 3.3rem;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: none;
}
.me {
  width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}

.hom_back {
  width: 100%;
  height: 4.5rem;
}

.hom_back img {
  width: 100%;
  height: 100%;
  position: relative;
}

.me_all {
  width: 100%;
  height: auto;
  position: absolute;
  top: 1.73rem;
}
.goout {
  position: absolute;
  display: flex;
  font-size: 0.25rem;
  color: #fff;
  top: 0.6rem;
  z-index: 1;
  right: 0.4rem;
  img {
    width: 0.26rem;
    height: 0.26rem;
    margin-top: 0.05rem;
    margin-right: 0.05rem;
  }
}
.me_top {
  width: 100%;
  height: 1.5rem;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0.87rem;
  padding-left: 0.28rem;
  box-sizing: border-box;
}

.me_name {
  margin-left: 0.28rem;
  font-size: 0.34rem;
  color: #ffffff;
}

.me_top .icon {
  width: 0.38rem;
  height: 0.38rem;
  margin-left: 0.19rem;
}

.me_online {
  position: absolute;
  top: 1.81rem;
  right: 0.38rem;
  font-size: 0.3rem;
  color: #ffffff;
}
.right-item {
  display: none;
}
.right-item.active {
  display: block;
}
.account {
  width: 6.9rem;
  height: auto;
  margin-left: 0.3rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  font-size: 0.28rem;
  position: absolute;
  top: 2.35rem;
  background: #ffffff;
  box-shadow: 0rem 0.04rem 0.68rem 0rem rgba(39, 52, 125, 0.25);
}

.account .balance {
  box-sizing: border-box;
  padding-left: 0.39rem;
  width: 100%;
  height: 1.6rem;
  .lookbalance {
    color: #ffa200;
    font-size: 0.32rem;
    margin-right: 0.41rem;
    margin-top: 0.3rem;
  }
}
.look_status {
  font-size: 0.32rem;
  color: #ffa100;
  margin-right: 0.41rem;
  margin-top: 0.3rem;
}
.balance div:nth-of-type(1) {
  font-size: 0.32rem;
  margin-top: 0.3rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  img {
    width: 0.47rem;
    height: 0.35rem;
    margin-top: 0.04rem;
    margin-right: 0.2rem;
  }
}

.balance div:nth-of-type(2) {
  font-size: 0.28rem;
  margin-top: 0.4rem;
}

.balance2 {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 1.16rem;
  background: #f5f6fb;
  box-sizing: border-box;
  border-radius: 0 0 0.2rem 0.2rem;
}

.balance2 div:nth-of-type(1) {
  font-size: 0.42rem;
  margin-top: 0.3rem;
}

.balance2 div:nth-of-type(2) {
  width: 0.02rem;
  height: 0.78rem;
  background: #e8ebf5;
  margin-right: 0.56rem;
  margin-top: 0.2rem;
}

.balance2 div:nth-of-type(3) {
  font-size: 0.42rem;
  color: #ffa200;
  margin-right: 0.68rem;
  margin-top: 0.3rem;
}

.account .withdrawal {
  width: 1.5rem;
  height: 0.66rem;
  background: linear-gradient(
    -90deg,
    rgba(255, 167, 0, 1),
    rgba(255, 204, 0, 1)
  );
  border-radius: 0.33rem;
  margin-top: 1rem;
  margin-right: 0.2rem;
  padding: 0;
  line-height: 0.66rem;
}

.menu {
  width: 6.94rem;
  height: 1.92rem;
  background: #fff;
  position: absolute;
  top: 5.49rem;
  left: 0.3rem;
  display: flex;
  justify-content: space-around;
  margin-top: 0.3rem;
  box-shadow: 0rem 0.04rem 0.68rem 0rem rgba(39, 52, 125, 0.25);
  border-radius: 0.1rem;
}

.menu .menu_module {
  width: auto;
  height: 1.9rem;
  font-size: 0.28rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 0.45rem;
  padding-left: 0.24rem;
  padding-right: 0.31rem;
  text-align: center;
}

.menu_gang {
  height: 0.88rem;
  width: 0.02rem;
  background: #e8ebf5;
  margin-top: 0.54rem;
}

.menu_module span:nth-of-type(1) {
  font-size: 0.28rem;
}

.menu_module span:nth-of-type(2) {
  font-size: 0.2rem;
  margin-top: 0.13rem;
}

.menu_module span:nth-last-child(1) {
  font-size: 0.24rem;
  color: #ffb400;
  margin-top: 0.14rem;
}

.list {
  width: 6.9rem;
  height: auto;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}

.list .li {
  width: 6.9rem;
  height: 0.7rem;
  border: 0.02rem solid #ccc;
  font-size: 0.28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list .li div:nth-child(1) {
  margin-left: 0.2rem;
}

.list .li div:nth-child(2) {
  margin-right: 0.2rem;
}

.pop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.pop_message {
  width: 6rem;
  height: 6.68rem;
  background: #ffffff;
  border-radius: 0.2rem;
  z-index: 2;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pop_message img {
  width: 5.5rem;
  margin-left: 0.25rem;
  margin-top: 0.25rem;
}

.pop_message div {
  width: 5.5rem;
  margin-left: 0.25rem;
  height: 1rem;
  font-size: 0.28rem;
}

.tab {
  float: left;
  width: 24.2%;
  text-align: center;
  padding: 0.1rem 0;
  margin-top: 0.3rem;
  font-size: 0.28rem;
}

.topTabSwiper {
  zoom: 1;
  margin-top: 3.5rem;
}

.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}

.tabBorer {
  color: #ffb400;
  font-size: 0.28rem;
}

.swiper {
  width: 100%;
  height: auto;
}

.swiper_con {
  text-align: center;
  width: 100%;
  height: auto;
}

.more_list {
  width: 7rem;
  height: auto;
  margin-left: 0.25rem;
}

.more_li {
  width: 100%;
  height: 0.6rem;
  border: 0.02rem solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.28rem;
  margin-top: 0.3rem;
}

.more_li span:nth-child(1) {
  margin-left: 0.15rem;
}

.more_li span:nth-child(2) {
  margin-right: 0.15rem;
}

.ranking {
  width: 100%;
  height: auto;
  font-size: 0.28rem;
  overflow-y: hidden;
  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
    margin-top: 1.8rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
}
.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0rem 0.04rem 0.28rem 0rem rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
  font-size: 0.28rem;
}

.back {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.back_tu {
  width: 6rem;
  height: 9.6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back .bc {
  width: 5.48rem;
  height: 6.91rem;
  display: block;
}

.back_bottom {
  width: 5.97rem;
  height: 2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0px 0px 0.32rem 0.32rem;
}

.back_title {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  margin-top: 0.39rem;
}

.back_title img:nth-child(1) {
  width: 0.58rem;
  height: 0.58rem;
}

.back_title img:nth-child(2) {
  width: 1.95rem;
  height: 0.31rem;
  margin-left: 0.11rem;
}

.back_bottom span {
  font-size: 0.24rem;
  font-family: Microsoft YaHei;
  color: #131010;
  margin-top: 0.23rem;
  font-weight: 400;
}

.back_bottom .liji {
  margin-top: 0.31rem;
  width: 5rem;
  height: 0.82rem;
  border: 0.02rem solid #f4d824;
  border-radius: 0.4rem;
  text-align: center;
  line-height: 0.82rem;
  font-size: 0.3rem;
  color: #f4d824;
  position: relative;
}
.lookstatus {
  font-size: 0.32rem;
  color: #ffa200;
  display: inline-block;
  margin-left: 3.5rem;
}
.txorder {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  z-index: 2;
}
.txorder .txorder_pop {
  width: 100%;
  height: 7.64rem;
  background: #ffffff;
  border-radius: 0.2rem 0.2rem 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
  button {
    width: 100%;
    height: 0.74rem;
    background: #dddddd;
    font-size: 0.28rem;
    color: #000000;
    outline: none;
    border: none;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.txorder_list {
  width: 100%;
  height: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0.3rem;
  color: #000000;
}
.txorder_title {
  width: 100%;
  height: 6.03rem;
  overflow: auto;
}
.null {
  width: 100%;
  height: 6.03rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 3.06rem;
    height: 2rem;
  }
}
.txorder_li {
  width: 100%;
  height: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0.3rem;
  color: #000000;
  border-top: 0.02rem solid #dddddd;
  .unfinished {
    color: #f4d824;
  }
  .success {
    color: #1db278;
  }
}
.classify {
  width: 50%;
  height: auto;
  display: flex;
  justify-content: space-around;
  font-size: 0.26rem;
  margin: auto;
  .active {
    border-bottom: 0.03rem solid #ff9119;
  }
}
</style>
